<template>   
    <div id="content-promote">
      <div class="search">
        <search
        class="content-search"
        @result-click="resultClick"
        @on-submit="onSubmit"
        @on-change="getResult"
        :results="results"
        v-model="value"
        ref="search"
        position="absolute"
        auto-scroll-to-top top="0px"
        placeholder="请输入关键字搜索" 
        @on-focus="onFocus"
        @on-cancel="onCancel"></search>
      </div>
      <div class="select">
        <tab :line-width="1" custom-bar-width="60px">
          <tab-item selected @on-item-click="onItemClick">推荐</tab-item>
          <tab-item @on-item-click="onItemClick">品牌</tab-item>
          <tab-item @on-item-click="onItemClick">行业</tab-item>
          <tab-item  @on-item-click="onItemClick">其他</tab-item>
        </tab>
      </div>
      <div class="circle"></div>
        <load-more :show-loading="false" :tip="'暂无数据'" v-if="lengthshow" background-color="#fbf9fe"></load-more>
        <scroller lock-x scrollbar-y use-pullup @on-pullup-loading="loadMore" v-model="status" ref="scroller">
          <div class="box2" style="margin-top:2.4rem">
            <content-list v-on:sharefriend="hideshared" v-for="(content, index) in contentlist" :key="index" :c="content" :keyindex="index"></content-list>
          </div>
          <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
            <span v-show="status.pullupStatus === 'default'"></span>
            <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
            <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
        </div>
      </scroller>
    <share-float :shareshow="shareshow" v-on:sharefriends="hideshare"></share-float>
  </div>
</template>
<script>
import ContentList from '../comment/ContentList'
import ShareFloat from '../comment/ShareFloat'
import { Search, Tab, TabItem, LoadMore, Scroller, Spinner } from 'vux'
import api from '../api'
export default {
  data () {
    return {
      results: [],
      selectshowlist: ['全部'],
      contentlist: [],
      showlist: [],
      value: '',
      shareshow: false,
      lengthshow: false,
      keyword: '', // 关键字
      typenum: 0, // 选择类别
      PageNum: 100, // 记录每页数
      count: 1,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Search,
    Tab,
    TabItem,
    ContentList,
    LoadMore,
    Scroller,
    ShareFloat,
    Spinner
  },
  created () {
    window.document.title = '内容推广'
    this.loadmore(this.PageNum, this.keyword, this.typenum)
  },
  methods: {
    hideshared () {
      this.shareshow = !this.shareshow
    },
    hideshare () {
      this.shareshow = !this.shareshow
    },
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.PageNum, this.keyword, this.typenum)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    loadmore (PageNum, keyword, typenum) {
      this.showlist = []
      var params = {
        typenum: typenum,
        keyword: keyword,
        page: 1,
        perPage: PageNum
      }
      api.contentpromote(params).then(res => {
        console.log(res)
        if (res.status === '200') {
          this.showlist = res.data.list
          this.contentlist = this.showlist
          if (this.contentlist.length === 0) {
            this.lengthshow = true
          } else {
            this.lengthshow = false
          }
        }
      })
    },
    resultClick (item) {
      console.log(item)
      var itemval = JSON.stringify(item)
      var arr = JSON.parse(itemval)
      this.value = arr.title
      this.contentlist = []
      console.log(arr.title === '全部')
      if (arr.title === '全部') {
        this.keyword = ''
        this.typenum = 0
        this.loadmore(this.PageNum, this.keyword, this.typenum)
      } else {
        for (var i=0;i < this.showlist.length; i++) {
          if (arr.title === this.showlist[i].title) {
            this.contentlist.push(this.showlist[i])
          }
        }
      }
    },
    getResult (val) {
      var selectlist = []
      var len
      for (var n in this.selectshowlist) {
        if (this.selectshowlist[n].indexOf(val) > -1) {
          selectlist.push(this.selectshowlist[n])
          this.results = getResult(this.value, selectlist)
        }
      }
      for (var i in this.results) {
        if (val === this.results[i].title) {
          selectlist.push(this.results[i].title)
          len = selectlist
        }
      }
      if (len !== undefined) {
        this.results = getResult(this.value, len)
      }
      if (this.value === '') {
        this.selectshowlist = []
        this.selectshowlist = ['全部']
        var contentlist = []
        for (var V in this.showlist) {
          contentlist.push(this.showlist[V].title)
        }
        this.selectshowlist = this.selectshowlist.concat(contentlist)
        len = this.selectshowlist
        this.results = getResult(this.value, len)
      }
    },
    onSubmit (val) {
      this.contentlist = []
      this.keyword = val
      this.loadmore(this.PageNum, this.keyword, this.typenum)
      this.results = []
    },
    onFocus () {
      this.value = ''
      var contentlist = []
      this.selectshowlist = []
      this.selectshowlist = ['全部']
      for (var i in this.showlist) {
        contentlist.push(this.showlist[i].title)
      }
      this.selectshowlist = this.selectshowlist.concat(contentlist)
      var len = this.selectshowlist
      this.results = getResult(this.value, len)
    },
    onCancel () {
      this.value = ''
      this.selectshowlist = []
    },
    onItemClick (index) {
      console.log(index)
      this.typenum = index
      this.keyword = ''
      this.contentlist = []
      this.loadmore(this.PageNum, this.keyword, this.typenum)
    }
  }
}
function getResult (val, len) {
  let rs = []
  for (let i = 0; i < len.length; i++) {
    rs.push({
      title: `${len[i]}`,
      other: i
    })
  }
  return rs
}
</script>
